<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我是一个首页</title>
    <link rel="stylesheet" href="/css/main.css"/>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        /*头部*/
        .ksd-headerbox {
            height: 240px;
            text-align: center;
            background: url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3827122839,3302242264&fm=26&gp=0.jpg") #FAFAFA;
            color: #fff;
            overflow: hidden
        }

        .ksd-headerbox .title {
            font-size: 28px;
        }

        .ksd-headerbox .ksd-cheade-box {
            max-width: 680px;
            margin: 0 auto;
            text-align: center;
            padding-top: 20px;
        }
    </style>

    <style>
        .ksd-section {
            margin-top: 100px
        }

        .ksd-container {
        }

        [v-cloak] {
            display: none
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <!--头部-->
    <header>
        <div class="ksd-headerbox">
            <div class="ksd-cheade-box">
                <h3 class="title pt30 b">{{stateVo.title}}</h3>
                <div class="pt15" v-html="stateVo.description"></div>
                <div class="pt20 f12">
                    <span class="mr15">参与人数：{{stateVo.personnum}}  </span>
                    <span class="ml15">统计时间：{{stateVo.createTime}}</span>
                    <input type="hidden" id="stateid" th:value="${id}">
                </div>
            </div>
        </div>
    </header>

    <!--主题内容-->
    <section class="ksd-section">
        <div class="layui-container ksd-container">
            <div class="layui-row" style="text-align: center">
                <div class="layui-col-md12 tc">
                    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                    <div id="main" style="width: 100%;height:400px;"></div>
                </div>
            </div>
        </div>
    </section>

    <!--底部-->
    <footer class="mt30">
        <div class="layui-container ksd-container">
            <div class="layui-row">
                <div class="layui-col-md12 tc">
                    <p class="b f20 g6">统计还剩余：{{stateVo.endtime}}</p>
                </div>
            </div>
        </div>
    </footer>
</div>

<script src="/layui/layui.js"></script>
<script src="/echarts/echarts.min.js"></script>
<script src="/js/vue.min.js"></script>
<script src="/js/axios.min.js"></script>
<script>

    var vue = new Vue({
        el: "#app",
        data: {
            stateid: "",
            stateVo: {},
            myChart: null,
            stateDetailList: [] // 用来接收统计的明细的容器
        },
        created: function () {
            this.stateid = document.getElementById("stateid").value;
            // 查询统计数据信息
            this.loadStateDetail()
        },
        methods: {
            // 查询统计数据信息接口定义
            loadStateDetail: function (callback) {
                var that = this;
                axios.get("/state/detail?stateid=" + this.stateid).then(function (res) {
                    // 查询数据表的数据vo
                    that.stateVo = res.data.data.stateVo;
                    // 获取到对应的明细数据
                    that.stateDetailList = res.data.data.stateVo.stateDetailList;
                    // 加载统计报表图
                    that.loadCharts(that.stateDetailList);
                })
            },
            // 统计报表的加载
            loadCharts: function (stateDetailList) {
                var that = this;
                if (stateDetailList && stateDetailList.length == 0) return;
                var xAxisData = [];
                var seriesData = [];
                for (var i = 0; i < stateDetailList.length; i++) {
                    xAxisData.push(stateDetailList[i].title + "(" + stateDetailList[i].itemnum + ")");
                    seriesData.push(stateDetailList[i].itemnum);
                }

                // 基于准备好的dom，初始化echarts实例
                if(!this.myChart){
                    this.myChart = echarts.init(document.getElementById('main'));
                    // 给统计报表绑定点击事件
                    that.myChart.on('click', function (params) {
                        if (this.stimer) clearTimeout(this.stimer);
                        this.stimer = setTimeout(function () {
                            var clickindex = params.dataIndex;
                            var selectObj = that.stateDetailList[clickindex];
                            /*1: 需求：根据用户点击所在的统计中的选项，进行一个累加的动作*/
                            var stateid = that.stateid;
                            var detailid = selectObj.id;
                            axios.post("/state/userdetail", {
                                "stateid": stateid,
                                "detailid": detailid
                            }).then(function (res) {
                                //1: 给用户一定的反馈
                                if (res.data.code == 20000) {
                                    // 重新加载数据库的数据放入到页面中
                                    that.loadStateDetail();
                                    layer.msg("投票成功");
                                } else {
                                    layer.msg(res.data.message);
                                }
                            })
                        }, 300)
                    });
                }

                // 指定图表的配置项和数据
                var option = {
                    xAxis: {
                        type: 'category',
                        data: xAxisData
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: seriesData,
                        type: 'bar'
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                that.myChart.setOption(option);
            }
        }
    })
</script>

</body>
</html>